<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/conm.css" type="text/css">
</head>
<body>
    <div id="app">
        <!-- <img :src="Urlsrc"> -->
        <!-- {{message}} -->
        <!-- <div :class="clsPrpo">
            <h1>我老婆</h1>
        </div> -->
        <!-- <p v-if="age===18">我本来就十八</p>
        <p v-else-if="age===20">不管再怎样我也是十八岁</p>
        <p v-else>岁月是把杀猪刀啊</p>
        <template v-if="age===18">
           <p>苍天在上</p> 
        </template>
        <template v-else-if="age===28">
            <p>厚土在下</p>
        </template>
        <template v-else>
            <p>最帅是我</p>
        </template> -->
        <ul>
            <li v-for="(f,index) in friutsSort">{{index+1}}-{{f.name}}-{{f.pirce}}</li>
        </ul>
        <ul>
            <li v-for="(u,key,index) of user">{{index+1}}-{{key}}-{{u}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app=new Vue
        ({
            el:'#app',
            data:
            {
                age:18,
                // Urlsrc:'./imgs/timg2.jpg' , 
                // hasColor:true,
                // hasNum:false,
                // colorCls:'forecolor'              
                friuts:
                [
                    {name:'苹果',pirce:600},
                    {name:'波罗蜜',pirce:500},
                    {name:'荔枝',pirce:800},
                    {name:'西瓜',pirce:400},
                    {name:'香橙',pirce:900},
                    {name:'香蕉',pirce:300},
                    {name:'火龙果',pirce:100}
                ],
                user:
                {
                    userName:'大壮',
                    passWord:'123456',
                    telPhone:'17858788894'
                }
            },
            computed:
            {
                bgcolorCls:function () {
                   return this.hasColor?'bgcolor':''
                },
                clsPrpo:function()
                {
                    return{
                        bgcolor:this.hasColor,
                        forecolor:this.hasNum
                    }
                },
                friutsSort:function()
                {
                    return this.friuts.sort(function(a,b){
                        return a.pirce-b.pirce
                    });
                }
            },
            filters:
            {

            }
        })
    </script>
</body>
</html>
